<template>
  <div class="con">
    <div class="top" v-text="title"></div>
    <div class="content">
      <div class="c_left">
        <!-- <a-button
          type="primary"
          style="margin-bottom: 10px"
          @click="collapsed = !collapsed"
        >
          <template #icon>
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
          </template>
        </a-button> -->
        <a-menu
          style="auto"
          :selectedKeys="selectedKeys"
          :openKeys="opdenKeys"
          mode="inline"
          :inline-collapsed="collapsed"
          @click="handleClick"
        >
          <a-sub-menu
            @titleClick="titleClick"
            v-for="(item, index) in btnList"
            :key="item.key"
          >
            <template #icon><component :is="item.icon"></component></template>
            <template #title>{{ item.name }}</template>
            <a-menu-item
              v-for="(it, index2) in item.children"
              :key="it.key"
              v-text="it.name"
              @click="tabChange(item.key, it)"
            >
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
      <div class="c_right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import router from "@/router";

interface btnType {
  key: string;
  name: string;
  url: string;
  icon?: string;
  children?: Array<btnType>;
}

const emit = defineEmits(["titleChange"]);

const collapsed = ref<boolean>(false);

const tabChange = (openKey: string, nowObj: btnType) => {
  opdenKeys.value = [openKey];
  selectedKeys.value = [nowObj.key];
  emit("titleChange", nowObj.name);
  if (nowObj.url) {
    router.push({
      path: nowObj.url,
    });
  }
};

const props = defineProps(["title", "btnList", "nowRoute"]);

const getOpdenKey = (url: string): string => {
  let res: string = "";
  for (let i = 0; i < props.btnList.length; i++) {
    for (let j = 0; j < props.btnList[i].children.length; j++) {
      let item: btnType = props.btnList[i].children[j];
      if (item.url == url) {
        res = props.btnList[i].key;
        break;
      }
    }
  }
  return res;
};

const getSelectedKey = (url: string): string => {
  return url.split("/")[2];
};

const getDefaultTitle = (url: string): string => {
  let res: string = "";
  for (let i = 0; i < props.btnList.length; i++) {
    for (let j = 0; j < props.btnList[i].children.length; j++) {
      let item: btnType = props.btnList[i].children[j];
      if (item.url == url) {
        res = item.name;
        break;
      }
    }
  }
  return res;
};
emit("titleChange", getDefaultTitle(props.nowRoute));

const opdenKeys = ref<string[]>([getOpdenKey(props.nowRoute)]);
const selectedKeys = ref([getSelectedKey(props.nowRoute)]);

// 默认方法
const handleClick = (e: Event): void => {
  // console.log(e);
};

const titleClick = (e: Event): void => {
  // console.log(e);
};
</script>

<style scoped lang="scss">
.con {
  padding: 20px 40px;
  .top {
    width: 100%;
    font-size: 20px;
    display: flex;
    padding-bottom: 20px;
    color: #1890ff;
    border-bottom: 4px solid #e6f7ff;
  }
  .content {
    widows: 100%;
    margin-top: 20px;
    height: auto;
    display: flex;
    .c_left {
      width: 260px;
    }
    .c_right {
      width: calc(100% - 290px);
      margin-left: 28px;
    }
  }
}
</style>
